<template>
    <div>
        <!-- 对象 -->
        <h4>{{user.name}}今年{{user.age}}</h4>
        <!-- 数组 -->
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{item.id}}:{{item.title}}
            </li>
        </ul>
        <!-- 触发 -->
        <button @click="user.age++">涨一岁</button>
        <button @click="list[0].id++">涨id</button>
    </div>
</template>
<script>
export default {
    watch:{
        list:{
            deep:true,
            handler(newList){
                console.log(newList);
            }
        },
        //我只对对象的某一个属性监听
        "user.age"(value){
            if(value === 36){
                alert('老颜要脱单')
            }
        },
        //对整个对象监听，当对象里的任意属性发生改变
        user(value){
            //当watch遇见对象或者数组类型的而数据，会产生一个深度监听的问题
            //watch监听是浅度的，对数组对象需要开启深度监听
            console.log(value);
        },
        //开启深度监听的写法
        user:{
            //deep:true 深度监听
           // handler:监听函数
            handler(obj){
                // console.log(obj.age);
                if(obj.age === 29){
                    obj.name='小颜';
                }
            },
            deep:true,
        }
    },
   data(){
       return {
           //对象
           user:{
               name:'老颜',
               age:26,
           },
           //数组
           list:[
               {id:1,title:'颜人中'},
               {id:2,title:'于朦胧'},
               {id:3,title:'华晨宇'},
           ]
       }
   }
}
</script>